<template>
  <!-- App.vue -->
  <v-app>
    <v-navigation-drawer app permanent touchless>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title">
            工具管家
          </v-list-item-title>
          <v-list-item-subtitle>
            演示程序
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <router-link :to="item.to">{{ item.title }}</router-link>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- <v-app-bar app>
    </v-app-bar> -->

    <!-- 根据应用组件来调整你的内容 -->
    <v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container fluid>
        <!-- 如果使用 vue-router -->
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <v-dialog v-model="dialogInventorying" persistent max-width="290">
        <v-card>
          <v-card-title class="text-h6 text-center">
            正在盘点，请稍后...
          </v-card-title>
        </v-card>
      </v-dialog>

      <v-snackbar v-if="!failed" v-model="alert" :timeout="3000" color="success">
        {{ info }}
      </v-snackbar>
      <v-snackbar v-else v-model="alert">
        {{ info }}

        <template v-slot:action="{ attrs }">
          <v-btn color="red" text v-bind="attrs" @click="alert = false">
            关闭
          </v-btn>
        </template>
      </v-snackbar>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    items: [
      {
        icon: 'mdi-account',
        title: '用户管理',
        to: '/user_manage',
      },
      {
        icon: 'mdi-toolbox',
        title: '工具类型管理',
        to: '/tool_type_manage',
      },
      {
        icon: 'mdi-archive',
        title: '抽屉管理',
        to: '/drawer_manage',
      },
      {
        icon: 'mdi-tools',
        title: '工具管理',
        to: '/tool_manage',
      },
      {
        icon: 'mdi-export',
        title: '工具借出/归还',
        to: '/tool_dispense',
      },
      {
        icon: 'mdi-history',
        title: '日志审计',
        to: '/operation_log',
      }
    ],
    dialogInventorying: false,
    alert: false,
    info: "",
    failed: false,
  }),

  methods: {
    onInventoried(succeed, resultOrErrInfo) {
      this.dialogInventorying = false
      if (!succeed) {
        this.info = '盘点失败，原因：' + resultOrErrInfo
        this.failed = true
        this.alert = true
      }
    },
  },

  mounted: function () {
    this.toolDispense.inventoried.connect(this.onInventoried)

    this.toolDispense.startInventory()
    this.dialogInventorying = true
  },

  unmounted: function () {
    this.toolDispense.inventoried.disconnect(this.onInventoried)
  },
}
</script>
